<template >
  <Node ref="node" :nodeComps="comps" :nodeProps="nodeProps" >
    <slot />
  </Node>
</template>

<script>
/* eslint-disable */

import {Node,CocosWrap} from "../cocos";
import BlockCCComponent from './Block.cccomponent';

export default {
  name: 'Block',
  components: {
    Node,
  },

  props: {
    nodeProps:{type:Object,default:()=>{return {}}},
    // blockProps:{type:Object,default:()=>{return {color:"#fff",vertexs:[{x:0,y:160},{x:160,y:160},{x:0,y:0}]}}},
    fillColor:{type: String, default: '#888'},
    vertexs:{type:Array,default:()=>{return [{x:0,y:160},{x:160,y:160},{x:0,y:0}]}},
  },

  data() {
    return {
      comps: [],
    };
  },

  computed: {
    parentnode(){
      return this.$parent.ccnode;
    },
  },
  
  watch: {
    "fillColor":{
      handler(newv,oldv){
        // console.log("block watch fillColor",newv,oldv);
        if(newv!==oldv){
          this.createComps();
        }
      }
    },
    "vertexs":{
      handler(newv,oldv){
        // console.log("block watch vertexs",newv,oldv);
        if(newv!==oldv){
          this.createComps();
        }
      }
    },
  },

  created() {
    // console.log("sprite created",this.spriteprops,this.ccnode); :nodeComps="comps"
    this.createComps();
  },
  
  // mounted(){
  //   console.log("node mounted");
  // },

  // updated(nv,ov){
  //   console.log("block updated",nv,ov);
  //   this.createComps();
  // },

  // beforeUpdate(nv,ov){
  //   console.log("sprite beforeUpdate",nv,ov);
  // },

  methods: {
    createComps(){
      // console.log("block createComps",this.fillColor,this.vertexs);
      let props = {fillColor:CocosWrap.hexToColor(this.fillColor),vertexs:this.vertexs };
      // if(this.comps.length===2){
      //   this.comps[1] = { type: BlockCCComponent,props };//.props = props;
      //   return;
      // }
      this.comps = [{ type: cc.Graphics },{ type: BlockCCComponent,props }];
    },
    getNode(){
      return this.$refs.node.ccnode;
    },

  },

}
</script>
